<template>
    <div id="base" class="">
        <!-- 底框1920*1060 -->
        <div id="u0" class="ax_default box_1" data-label="底框1920*1060">
            <div id="u0_div"></div>
        </div>

        <!-- 背景图 -->
        <div id="u1" class="ax_default image">
            <img id="u1_img" class="img" src="@/assets/start/u1.png"  alt=""/>
        </div>


        <!-- 图像 隐藏 -->
        <div id="u3" class="ax_default image" v-show="false">
            <img id="u3_img" src="@/assets/start/u3.png"  alt=""/>
        </div>

        <div style="margin-top: -10rem">
            <div id="u4" class="ax_default box_1">
                <img id="u4_img" src="@/assets/start/u4.svg"  alt=""/>
            </div>

            <!-- 按钮 -->
            <div id="u5" >
                <el-button  @click="login" type="primary" style="width: 15rem;font-size: 24px;">登录</el-button>
            </div>

            <!-- 标题 -->
            <div id="u6" class="ax_default _标题_1">
                <div id="u6_text" class="text">
                    <p style="font-size:80px;">
                        <span style="color:#FFFFFF">智慧供配电技术虚拟仿真系统</span>
                    </p>
                    <p style="font-size:40px;">
                        <span style="color:rgba(66, 0, 128, 0.94)">（WEB版）</span>
                    </p>
                </div>
            </div>


            <!-- 副标题文字 -->
            <div  class="login-form">
                <el-form :model="form" ref="loginForm" style="width: 400px;">
                    <el-form-item prop="username">
                        <el-input v-model="form.username" placeholder="请输入账号" size="large">
                            <template #prepend>账号</template>
                        </el-input>
                    </el-form-item>

                    <el-form-item prop="password">
                        <el-input v-model="form.password" type="password" placeholder="请输入密码" size="large">
                            <template #prepend>密码</template>
                        </el-input>
                    </el-form-item>

                </el-form>

            </div>
        </div>
        <!-- 装饰框 -->

    </div>

</template>

<script>
import ScaleBox from "@/components/ScaleBox/ScaleBox.vue";

export default {
    name: "login",
    components: {ScaleBox},
    data() {
        return {
            form: {
                username: '',
                password: ''
            }
        };
    },
    methods: {
        login() {
            if (!this.form.username || !this.form.password) {
                this.$message.warning('请输入账号和密码');
                return;
            }
          this.$router.push('/selectPage')

        }
    }
};
</script>

<style scoped>

@import "~@/assets/axure/axure_rp_page.css";
@import "~@/assets/axure/styles.css";
@import "~@/assets/start/styles.css";


#base {
    position: relative;
}
.login-form {
    width: 400px; /* 可根据页面布局调整 */
    position: absolute;
    padding: 40px 30px;
    border-radius: 10px;
    top: 630px;
    left: 39%;
    text-align: center;
    transform: scale(1.5);
}
#u0_div{
    background-image: url('../../src/assets/start/__960_540_u9.svg');
}
</style>
